<div class="row" style="margin-bottom:48px;">
	<div class="col-md-8 col-md-offset-2">
	    <p>With this free online image converter tool you can create C arrays or raw binary files from images. Any image format supported by your browser should work (PNG, JPG and BMP files should always work).</p>
	    
	    <p>The files are intended for use with <a href="https://lvgl.io" title="Open-source Embedded GUI Library">LVGL</a> but can also be used with other graphics libraries if modified.</p>
	
		<p>The offline version of the converter is available <a href="https://github.com/lvgl/lv_img_conv" title="Offline image converter on GitHub">here</a>.</p>
	
		<h3>How to use the image converter</h3>
		<ol>
		    <li>Choose one or more images (png, jpg, or bmp).</li>
		    <li>Give a name to the output file (e.g. "wallpaper1").</li>
		    <li>Specify the desired color format. Scroll down for details.</li>
		    <li>Optionally, enable dithering.</li>
		    <li>Click the Convert button to download the resulting C file.</li>
		</ol>
	
		<h3>How to use the generated file in LVGL</h3>
		<ol>
		    <li>Copy the resulting C file into your LVGL project</li>
		    <li>In a C file of your application declare the image as: <code class="code-inline">LV_IMG_DECLARE(my_image_name);</code></li>
		    <li>Set the image as the source of an image object: <code class="code-inline">lv_img_set_src(img, &my_image_name);</code></li>
		</ol>
	</div>
</div>

<style>
    form[name="img_conv"] {
        padding: 12px;
        border-radius: 4px;
        border-style: solid;
        border-width: 2px;
        border-color: #7babda;
    }
</style>

<div class="row react-app-container"></div>
   
<div class="row">
     <!--
	<div class="col-md-9 col-md-offset-2">
		<form enctype="multipart/form-data" name="img_conv" style="">

			<div class="form-group row">
				<label for="customFile" class="form-label col-md-3">Image file</label>
				<div class="col-md-9">
					<div class="custom-file">
						<input multiple type="file" class="custom-file-input" id="customFile">
						<label class="custom-file-label" for="customFile" class="form-label col-md-3">No file(s) selected.</label>
					</div>
				</div>
			</div>


			<div class="form-group row name-row" style="display:none">
				<label for="name0" class="form-label col-md-3">File name(s)</label>
				<div class="col-md-9 name-container">
					<input type="text" name="name" id="name" class="form-control" placeholder="Name of output .C files (E.g: red_flower)" style="height:unset">
				</div>
			</div>


			<div class="form-group row">
				<label for="transp" class="col-md-3 col-form-label">Color format

				</label>
				<div class="col-md-9">
					<select class="custom-select" name="cf" id="cf" style="height:unset">
						<option value="CF_TRUE_COLOR">True color</option>
						<option value="CF_TRUE_COLOR_ALPHA">True color with alpha</option>
						<option value="CF_TRUE_COLOR_CHROMA">True color chroma keyed</option>
						<option value="" disabled="">—————————————</option>
						<option value="CF_INDEXED_1_BIT">Indexed 2 colors</option>
						<option value="CF_INDEXED_2_BIT">Indexed 4 colors</option>
						<option value="CF_INDEXED_4_BIT">Indexed 16 colors</option>
						<option value="CF_INDEXED_8_BIT">Indexed 256 colors</option>
						<option value="" disabled="">—————————————</option>
						<option value="CF_ALPHA_1_BIT">Alpha only 2 shades</option>
						<option value="CF_ALPHA_2_BIT">Alpha only 4 shades</option>
						<option value="CF_ALPHA_4_BIT">Alpha only 16 shades</option>
                        <option value="CF_ALPHA_8_BIT">Alpha only 256 shades</option>
						<option value="" disabled="">—————————————</option>
						<option value="CF_RAW">Raw</option>
						<option value="CF_RAW_ALPHA">Raw with alpha</option>
                        <option value="CF_RAW_CHROMA">Raw as chroma keyed</option>
                        <option value="" disabled="">—————————————</option>
						<option value="CF_RGB565A8">RGB565-A8</option>
					</select><br>
					<p class="text-mute" style="font-size:14px;"><strong style="font-size:14px;">Alpha byte</strong> Add a 8 bit Alpha value to every pixel<br>
						<strong style="font-size:14px;">Chroma keyed</strong> Make LV_COLOR_TRANSP (lv_conf.h) pixels to transparent</p>
				</div>
			</div>

            <div class="form-group row">
                <label for="bin_or_c" class="col-md-3 col-form-label">Output format </label>
                <div class="col-md-9">
                    <select name="format" id="format" style="height:unset">
                        <option value="c_array">C array</option>
                        <option value="bin">Binary</option>
                        <option value="bin_332">Binary RGB332</option>
                        <option value="bin_565">Binary RGB565</option>
                        <option value="bin_565_swap">Binary RGB565 Swap</option>
                        <option value="bin_888">Binary RGB888</option>
                    </select><br>
                </div>
            </div>

			<div class="form-group row">
				<label for="bin_or_c" class="col-md-3 col-form-label">Options</label>
				<div class="col-md-9">
					<div class="custom-control custom-checkbox">
						<input type="checkbox" class="custom-control-input" id="dith-checkbox" name="dith" value="1" style="height:unset" title="Dithering prevents color banding on lower color depths" );="">
						<label class="custom-control-label" for="dith-checkbox">Dither images (can improve quality)</label>
					</div>
					<div class="custom-control custom-checkbox">
						<input type="checkbox" class="custom-control-input" id="endian-checkbox" name="endian" value="1" style="height:unset" title="Swaps bytes of 16-bit and 32-bit image formats" );="">
						<label class="custom-control-label" for="endian-checkbox">Output in big-endian format</label>
					</div>
				</div>
			</div>


			<div class="form-group">
				<input type="button" value="Convert" id="convert-button" name="submit" style="height:unset" class="btn btn-primary">
			</div>
		</form>
  	</div>
-->
	<script src="./index.tsx" type="module"></script>

</div>
